<template>
    <div class='w100 h100' id="mainss">

    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            option: {}
        }
    },
    created() { },
    mounted() {

        var chartDom = document.getElementById('mainss');
        var myChart = this.$echarts.init(chartDom);
        this.option = {
            title: {
                text: '超期金额',
                subtext: 'Fake Data',
                left: 'center',

            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                show: false,//取消饼图下方的标题
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',

                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(this.option);




    },
    methods: {}
}
</script>
<style scoped lang='scss'>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
</style>
